<template>
  <div class="container">
    <table class="material-table">
      <thead>
        <tr class="header-detail">
          <th>对象</th>
          <th><img src="../../assets/line.svg" alt="" />值</th>
        </tr>
      </thead>
      <tbody>
        <TbodyComp
          :selectedMaterial="selectedMaterial"
          :originalMaterial="materialIn"
          :editorProps="editorProps"
          :propsInitial="propsInitial"
          :materialListIn="materialList"
          @update="updateProps"
          @onclick="handleClick"
        />
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed } from "vue";
import { Table, tableProps, ColorPicker, Select, Checkbox } from "cax-ui";
import TbodyComp from "./TbodyComp.vue";

const props = defineProps({
  materialIn: {
    type: Object,
    default: () => {
      return { name: "材料A", id: 957, is_selected: false };
    },
  },
  editorProps: {
    type: Object as () => Record<string, any>,
    default: () => ({}), // 默认值为空对象
  },
  propsInitial: {
    type: Object as () => Record<string, any>,
    default: () => ({}), // 默认值为空对象
  },
  materialList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const selectedMaterial = ref();
selectedMaterial.value = flattenObject(props.materialIn);
const obj = {
  name: "parent",
  child: {
    name: "parent child",
    value: "child value",
  },
};

console.log("obj after flatten:", flattenObject(obj));
const emit = defineEmits(["update", "onclick"]);

function flattenObject(
  obj: Record<string, any>,
  parentKey = "",
  result: any = {}
) {
  for (let key in obj) {
    if (key === "value") {
      result[parentKey] = { ...result[parentKey], value: obj[key] };
      continue;
    }
    const newKey = parentKey ? `${parentKey}-${key}` : key;
    if (typeof obj[key] === "object" && obj[key] !== null) {
      // 递归处理嵌套对象
      result[newKey] = { hasChild: true };
      flattenObject(obj[key], newKey, result);
    } else {
      // 设置平铺后的键值对
      result[newKey] = obj[key];
    }
  }
  return result;
}
function updateProps(obj: Record<string, any>) {
  selectedMaterial.value = flattenObject(obj);
  emit("update", obj);
}

function handleClick(v: any) {
  emit("onclick", v);
}
</script>
<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.material-table {
  width: 100%;
  border-collapse: collapse;
  overflow-x: hidden;
  border-radius: 2px;
  box-sizing: border-box;
  .header-detail {
    height: 34px;
    background: #f8f9fa;
    padding: 6px 0;
    font-family: PingFang SC;
    font-weight: normal;
    line-height: 22px;
    letter-spacing: 0em;
    color: #495057;
    th {
      position: relative;
      padding-left: 16px;
      font-size: 14px;
      text-align: left;
      font-weight: 400;
      img {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
      }
      &:last-child {
        width: 100%;
      }
      &:first-child {
        width: max-content;
      }
    }
  }
  tbody {
    width: 100%;
  }
}
</style>
